<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
    <title>利用UL和LI标签实现的表格table效果</title>
    <style type="text/css">
        #tb {
            clear:both; 
            border-top:1px solid #fff; 
            border-left:1px solid #fff;
        }

        ul {
            list-style: none;
            padding: 0px;
            margin: 0px;
            width: 100%;
            height: 40px;
            line-height: 40px;
            border: 1px solid #99CC00;
            border-top: 0px;
            font-size: 16px;
        }
        
        ul li:nth-child(1),li:nth-child(3), li:nth-child(4){
            display: block;
            width: 20%;
            float: left;
        }

        ul li:nth-child(2){
            display: block;
            width: 40%;
            float: left;
        }

        .th {
            background: #F1FADE;
            font-weight: bold;
            border-top: 1px
        }

        #operations input{
            background-color: #99CC00;
            border: none;
            width: 80px;
            margin-right: 40px;
            margin-bottom: 10px;
            height: 30px;
        }
    </style>
</head>

<body>
    <h1>Hi, title here</h1>
    <div id="operations">
        <input type="button" value="Add" />
        <input type="button" value="Delete" />
        <input type="button" value="Modify" />
    </div>
    <div id="tb">
        
        <ul class="th">
            <li>course_id</li>
            <li class="liTitle">title</li>
            <li>dept_name</li>
            <li>credits</li>
        </ul>
        ^_^
    </div>
</body>

</html>